<template>
    <div class="video-box">
        <div class="base bg-white">
            <div class="left-box">
                <div class="lb-t">
                    <n-icon size="40" v-show="videoType === '1'">
                        <svg t="1628238806411" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="2094" width="200" height="200">
                            <path
                                d="M807.538 408.872l-99.22 231.336c-5.233 12.162-16.68 19.405-28.892 19.837a86.04 86.04 0 0 1-2.907 0c-12.311-0.416-23.858-7.66-29.108-19.837L561.499 441.17v185.847c0 18.359-14.87 33.228-33.228 33.228s-33.23-14.87-33.23-33.228V527.93l-66.755 115.618c-6.396 11.081-18.208 16.93-30.154 16.448-11.43 0.482-22.745-5.367-28.86-16.448l-73.601-133.28v116.749c0 18.359-14.87 33.228-33.229 33.228s-33.229-14.87-33.229-33.228V394.418c0-18.36 14.87-33.229 33.23-33.229 14.104 0 26.067 8.822 30.902 21.2 4.719 2.824 104.786 180.48 104.786 180.48l96.91-167.853s14.87-33.827 33.229-33.827c10.051 0 18.94 4.553 25.037 11.597 3.09-3.538 6.895-6.53 11.414-8.573 16.83-7.642 36.435-0.016 43.778 17.013l69.447 160.908 69.015-160.908c7.31-17.03 26.799-24.656 43.53-17.013 16.714 7.626 24.357 27.63 17.047 44.66z"
                                fill="#d61c1c" p-id="2095"></path>
                            <path
                                d="M927.011 294.733c0-82.573-66.939-149.528-149.528-149.528H245.83c-82.59 0-149.528 66.955-149.528 149.528v431.969c0 82.589 66.939 149.527 149.528 149.527h531.653c82.59 0 149.528-66.938 149.528-149.527v-431.97zM794.097 942.686H229.214c-110.102 0-199.37-89.268-199.37-199.37V278.117c0-110.102 89.268-199.37 199.37-199.37h564.883c110.102 0 199.37 89.268 199.37 199.37v465.197c0 110.103-89.268 199.371-199.37 199.371z"
                                fill="#d61c1c" p-id="2096"></path>
                        </svg>
                    </n-icon>
                    <p class="ml-4  text-2xl">{{name}}</p>
                    <p class="mt-auto ml-auto text-red-600">{{artistName}}</p>
                </div>
    
                <div class="player-container">
                    <video-player class="video-player vjs-custom-skin"
                                  ref="videoPlayer"
                                  :playsinline="true"
                                  :options="playerOptions">
                    </video-player>
                </div>
                <div class="lb-b">
                    <comment-on :comment-count="commentCount" :comment-type="videoType" :id="id"></comment-on>
                </div>
            </div>
            <div class="right-box">
                <div class="rb-t">
                    <div>
                        <p class="w-full border-b font-semibold">MV简介</p>
                        <p class="text-gray-400 mt-1">发布时间：{{publishTime}}</p>
                        <p class="text-gray-400 mt-1">播放次数：{{playTime}}</p>
                        <p class="mt-1" v-for="(item, index) in desc" :key="index">{{item}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {NIcon} from 'naive-ui';
import CommentOn from "@/components/comment/CommentOn";
import {onMounted, reactive, toRefs} from "vue";
import {useRoute} from "vue-router";
import {getMvDetail, getMvUrl, getVideoDetail, getVideoUrl} from "@/network/data/video";
import {calData} from "@/util/cal";
import {useStore} from "vuex";
export default {
    name: "Vedio",
    setup() {
        const TAG = "video.vue";
        const route = useRoute();
        const store = useStore();
        const videoInfo = reactive({
            commentCount: 0,
            id: route.query.id,
            videoType: route.query.type,
            name: '',
            artistId: 0,
            artistName: '',
            desc: [],
            publishTime: '',
            playTime: 0
        })
        const playerOptions = reactive({
            //播放速度
            playbackRates: [0.5, 1.0, 1.5, 2.0],
            //如果true,浏览器准备好时开始回放。
            autoplay: false,
            // 默认情况下将会消除任何音频。
            muted: false,
            // 导致视频一结束就重新开始。
            loop: false,
            // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            preload: 'auto',
            language: 'zh-CN',
            // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            aspectRatio: '16:9',
            // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            fluid: true,
            sources: [{
                //类型
                type: "video/mp4",
                //url地址
                src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4'
            }],
            //你的封面地址
            poster: '',
            //允许覆盖Video.js无法播放媒体源时显示的默认信息。
            notSupportedMessage: '此视频暂无法播放，请稍后再试',
            controlBar: {
                timeDivider: true,
                durationDisplay: true,
                remainingTimeDisplay: false,
                //全屏按钮
                fullscreenToggle: true
            }
        })
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        const init = () => {
            // MV
            beLoading();
            if (videoInfo.videoType === '1') {
                getMvDetail(videoInfo.id).then(res => {
                    playerOptions.poster = res.data.data.cover;
                    videoInfo.name = res.data.data.name;
                    videoInfo.artistId = res.data.data.artistId;
                    videoInfo.artistName = res.data.data.artistName;
                    videoInfo.commentCount = res.data.data.commentCount;
                    videoInfo.playTime = res.data.data.playCount;
                    videoInfo.publishTime = res.data.data.publishTime;
                    videoInfo.desc = res.data.data.desc.split('\n');
                })
    
                getMvUrl(videoInfo.id).then(res => {
                    playerOptions.sources[0].src = res.data.data.url;
                })
            } else if (videoInfo.videoType === '5') {
                // 视频
                getVideoDetail(videoInfo.id).then(res => {
                    playerOptions.poster = res.data.data.coverUrl;
                    videoInfo.name = res.data.data.title;
                    videoInfo.artistId = res.data.data.userId;
                    videoInfo.artistName = res.data.data.creator.nickname;
                    videoInfo.commentCount = res.data.data.commentCount;
                    videoInfo.playTime = res.data.data.playTime;
                    videoInfo.desc = res.data.data.description.split('\n');
                    videoInfo.publishTime = calData(res.data.data.publishTime);
                })
                getVideoUrl(videoInfo.id).then(res => {
                    playerOptions.sources[0].src = res.data.urls[0].url;
                })
            }
        }
        onMounted(() => {
            init();
        })
        return {
            playerOptions,
            ...toRefs(videoInfo)
        }
    },
    components: {
        NIcon,
        CommentOn
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';
.video-box {
    width: $client-width;
    background: #f4f4f4;
    
    min-height: $client-height;
    .left-box {
        @apply w-4/5 border-r border-l;
        .lb-t {
            @apply flex items-center my-4 mx-16;
        }
        .player-container {
            @apply mx-16;
        }
        .lb-b {
            @apply mt-4 mx-16;
        }
    }
    .right-box {
        @apply w-1/5 border-r;
        .rb-t {
            @apply m-4;
        }
    }
}
</style>